<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <link href="css/common.css" rel="stylesheet"/>
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <link rel="stylesheet" href="css/mui.min.css" />
    <link rel="stylesheet" href="css/mui.picker.min.css" />
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="bootstrap/js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <style type="text/css">
    	.content{
    		border-top: 5px solid #eeeeee;
    		background: transparent;
    		padding: 0 15px;
    	}
   
        .search{
    		background: #fff;
    		height: 50px;
    	}
    	#search{
    		background-color: #eee;
			border: none;
			height: 30px;
			width: 58%;
			border-radius: 18px;
			text-indent: 7px;
    	}
    	.search select{
    		-webkit-appearance: menulist!important;
	    	-moz-appearance: menulist!important;
	    	appearance: menulist!important;
	    	width: 25%;
	    	padding: 0;
    	}
		input::-webkit-input-placeholder {
		  /* WebKit browsers */
		  text-align: center;
		}
		input:-moz-placeholder {
		  /* Mozilla Firefox 4 to 18 */
		  text-align: center;
		}
		input:-ms-input-placeholder {
		  /* Internet Explorer 10 */
		  text-align: center;
		}
		input::placeholder {
		  text-align: center;
		}
        
        .table>tbody>tr>td{
            border-top:none;
            vertical-align: middle;
            text-align: center;
            padding: 8px 0;
        }
        .t1{ text-align: left!important;}
        .table>tbody>tr>.line{
            border-right: 1px #7d7d7d solid;
            padding: 0 6px
        }
        .td1{width: 8rem;}
        .table{ font-size: 1.4rem;}
        .table-striped>tbody>.tr_1{ background-color: #deebf4!important;
        color: #06599f; font-weight: 700!important;}
        .color1{ color: #1f72b8;}
        .color2{ color: #c81928;}
        .color3{ color: #2cc6a4;}
        .icon-xiangqing{
        	font-size: 1.2rem;
        }
    </style>
</head>
<body>
	<header class="nav">
		<i class="iconfont icon-fanhui" style="float: left;"></i>
	    <span>督情总览</span>
	</header>
	<div class="content">
		<p class="col_title" style="text-align: center;">
	        全市承办总数合计：<font color="#fe9e23" size="+2">680</font>件
	    </p>
	   <div class="search">
	   	<span style="font-size: 1.5rem;">排名：</span>
			<select style="border: none;height: 50px;font-size: 1.5rem;">
				<option>承办总数</option>
				<option>正常在办</option>
				<option>逾期件数</option>
				<option>办结完成</option>
			</select>
			<input type="" name="" id="search" value="" placeholder="搜索"/>
			<img id="sicon" src="img/sear.png" style="width: 15px;position: absolute;left: 60%;top: 118px;"/>
		</div>
	    <table class="table table-striped">
	        <tr class="tr_1">
	            <td class="td1 line">承办对象</td>
	            <td class="line">承办总数</td>
	            <td class="line">正常推进</td>
	            <td class="line">进展缓慢</td>
	            <td class="line">已办合格</td>
	            <td>已办不合格</td>
	        </tr>
	
	        <tr>
	            <td class="t1">土地发展中心</td>
	            <td>550</td>
	            <td class="color1">60</td>
	            <td class="color2">6</td>
	            <td class="color3">60</td>
	            <td>100<i class="icon-xiangqing iconfont"></i></td>
	        </tr>
	
	        <tr>
	            <td class="t1">规划局</td>
	            <td>550</td>
	            <td class="color1">60</td>
	            <td class="color2">6</td>
	            <td class="color3">60</td>
	            <td>100<i class="icon-xiangqing iconfont"></i></td>
	        </tr>
	
	        <tr>
	            <td class="t1">土地发展中心</td>
	            <td>550</td>
	            <td class="color1">60</td>
	            <td class="color2">6</td>
	            <td class="color3">60</td>
	            <td>100<i class="icon-xiangqing iconfont"></i></td>
	        </tr>
	
	        <tr>
	            <td class="t1">规划局</td>
	            <td>550</td>
	            <td class="color1">60</td>
	            <td class="color2">6</td>
	            <td class="color3">60</td>
	            <td>100<i class="icon-xiangqing iconfont"></i></td>
	        </tr>
	        <tr>
	            <td class="t1">土地发展中心</td>
	            <td>550</td>
	            <td class="color1">60</td>
	            <td class="color2">6</td>
	            <td class="color3">60</td>
	            <td>100<i class="icon-xiangqing iconfont"></i></td>
	        </tr>
	
	        <tr>
	            <td class="t1">规划局</td>
	            <td>550</td>
	            <td class="color1">60</td>
	            <td class="color2">6</td>
	            <td class="color3">60</td>
	            <td>100<i class="icon-xiangqing iconfont"></i></td>
	        </tr>
	        <tr>
	            <td class="t1">土地发展中心</td>
	            <td>550</td>
	            <td class="color1">60</td>
	            <td class="color2">6</td>
	            <td class="color3">60</td>
	            <td>100<i class="icon-xiangqing iconfont"></i></td>
	        </tr>
	
	        <tr>
	            <td class="t1">规划局</td>
	            <td>550</td>
	            <td class="color1">60</td>
	            <td class="color2">6</td>
	            <td class="color3">60</td>
	            <td>100<i class="icon-xiangqing iconfont"></i></td>
	        </tr>
	    </table>
	</div>
	<script type="text/javascript" src="js/mui.min.js" ></script>
    <script type="text/javascript" src="js/mui.picker.min.js" ></script>
    <script src="js/common.js"></script>
    <script>
    	window.onload=function(){
    		document.getElementById('search').addEventListener('input',function(){
    			if(this.value!=''){
    				document.getElementById('sicon').style.display='none';
    			}else{
    				document.getElementById('sicon').style.display='block';
    			}
    		})
    	}
    </script>
</body>
</html>
